<template>
  <div>路由守卫界面： <button @click="skip">跳转进首页</button></div>
</template>

<script lang="ts" setup>
import { onBeforeRouteLeave, useRouter } from 'vue-router'

// 声明调用
const router = useRouter() // 跳转

// 添加一个导航守卫，在当前组件将要离开时触发
onBeforeRouteLeave((to, from, next) => {
  next()
})

// 添加一个导航守卫，在当前组件更新时触发。
// 在当前路由改变，但是该组件被复用时调用。
onBeforeRouteLeave((to, from, next) => {
  next()
})

const skip = () => {
  // 路由跳转
  router.push('/')
}
</script>
<style scoped>
.my-box {
  display: flex;
}
/* 支持CSS变量注入v-bind(color) */
</style>
